<!DOCTYPE html>
<html>
<head>
    <title>Icon Generator</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .icon { margin: 10px; display: inline-block; text-align: center; }
        canvas { border: 1px solid #ccc; display: block; margin: 5px auto; }
        .download { margin: 10px; }
    </style>
</head>
<body>
    <h1>Element Controller Icon Generator</h1>
    <p>Right-click and "Save image as..." to download each icon.</p>
    
    <div class="icon">
        <h3>16x16 Icon</h3>
        <canvas id="icon16" width="16" height="16"></canvas>
        <div class="download">
            <a id="download16" download="icon16.png">Download icon16.png</a>
        </div>
    </div>
    
    <div class="icon">
        <h3>48x48 Icon</h3>
        <canvas id="icon48" width="48" height="48"></canvas>
        <div class="download">
            <a id="download48" download="icon48.png">Download icon48.png</a>
        </div>
    </div>
    
    <div class="icon">
        <h3>128x128 Icon</h3>
        <canvas id="icon128" width="128" height="128"></canvas>
        <div class="download">
            <a id="download128" download="icon128.png">Download icon128.png</a>
        </div>
    </div>

    <script>
        function drawIcon(canvas, size) {
            const ctx = canvas.getContext('2d');
            const center = size / 2;
            
            // Clear canvas
            ctx.clearRect(0, 0, size, size);
            
            // Background gradient
            const gradient = ctx.createRadialGradient(center, center, 0, center, center, center);
            gradient.addColorStop(0, '#667eea');
            gradient.addColorStop(1, '#764ba2');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, size, size);
            
            // Draw target/crosshair symbol
            ctx.strokeStyle = 'white';
            ctx.lineWidth = Math.max(1, size / 16);
            
            // Outer circle
            ctx.beginPath();
            ctx.arc(center, center, size * 0.35, 0, 2 * Math.PI);
            ctx.stroke();
            
            // Inner circle
            ctx.beginPath();
            ctx.arc(center, center, size * 0.15, 0, 2 * Math.PI);
            ctx.stroke();
            
            // Crosshairs
            const crossSize = size * 0.45;
            const lineOffset = size * 0.1;
            
            // Horizontal line
            ctx.beginPath();
            ctx.moveTo(center - crossSize, center);
            ctx.lineTo(center - lineOffset, center);
            ctx.moveTo(center + lineOffset, center);
            ctx.lineTo(center + crossSize, center);
            ctx.stroke();
            
            // Vertical line
            ctx.beginPath();
            ctx.moveTo(center, center - crossSize);
            ctx.lineTo(center, center - lineOffset);
            ctx.moveTo(center, center + lineOffset);
            ctx.lineTo(center, center + crossSize);
            ctx.stroke();
            
            // Center dot
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(center, center, size * 0.05, 0, 2 * Math.PI);
            ctx.fill();
        }
        
        function setupDownload(canvasId, downloadId) {
            const canvas = document.getElementById(canvasId);
            const download = document.getElementById(downloadId);
            
            download.addEventListener('click', function(e) {
                download.href = canvas.toDataURL('image/png');
            });
        }
        
        // Generate icons
        drawIcon(document.getElementById('icon16'), 16);
        drawIcon(document.getElementById('icon48'), 48);
        drawIcon(document.getElementById('icon128'), 128);
        
        // Setup downloads
        setupDownload('icon16', 'download16');
        setupDownload('icon48', 'download48');
        setupDownload('icon128', 'download128');
    </script>
</body>
</html>